<script setup>
import {onMounted, ref} from "vue";
import {createUser, deleteUser, listUser, listUserPermission} from "../../../http/rabbitmq/user.js";
import {rabbitmqStore} from "../../../stores/counter.js";
import {listVhost} from "../../../http/rabbitmq/vhost.js";
import {createPermission, deletePermission, listPermission} from "../../../http/rabbitmq/permission.js";

const username = ref("")
const vhostList = ref([])
const permissionList = ref([])

const userTableData = ref([])

const showUserForm = ref(false)
const userUpdate = ref(false)
const userForm = ref({
  "username": "",
  "password": "",
  "tags": ""
})

const showUserPermissionForm = ref(false)
const userPermissionForm = ref({
  "username":"",
  "vhost":"",
  "configure":".*",
  "write":".*",
  "read":".*"
})

function handleUserPermissionSave() {
  createPermission(userPermissionForm.value).then(response => {
    handleUserPermissionList(userPermissionForm.value.username)
  })
}

function handleUserPermissionDelete(row) {
  deletePermission(row).then(response => {
    handleUserPermissionList(row.user)
  })
}

function showUserCreate() {
  showUserForm.value = true
  userUpdate.value = false
}

function handleUserSave() {
  handleUserCreate()
}

function handleUserCreate() {
  createUser(userForm.value).then(response => {
    handleUserList()
    showUserForm.value = false
  })
  userForm.value = {
    "vhost": "/",
    "type": "direct",
    "durable": "true",
    "auto_delete": "false",
    "internal": "false"
  }
}

function handleUserDelete(row) {
  deleteUser(row.name).then(response => {
    handleUserList()
    showUserForm.value = false
  })
}

function handleUserList() {
  listUser(username.value).then(response => {
    userTableData.value = response.items
  })
}

function handleVhostList() {
  listVhost().then(response => {
    vhostList.value = response
  })
}

function showUserPermissionList(name){
  handleUserPermissionList(name)
  userPermissionForm.value.username = name
  showUserPermissionForm.value = true
}

function handleUserPermissionList(name) {
  listUserPermission(name).then(response => {
    permissionList.value = response
  })
}

onMounted(() => {
  handleUserList()
  handleVhostList()
})

</script>

<template>
  <div style="display: flex; flex-flow: column nowrap; width: 100%; height: 100%; overflow: hidden;">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px;">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="Name">
          <el-input v-model="username" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleUserList">Search</el-button>
          <el-button type="primary" @click="showUserCreate({})">New</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
        highlight-current-row
        :data="userTableData" border style="width: calc(100% - 5px); height: calc(100% - 50px)">
      <el-table-column prop="name" label="name" min-width="100"/>
      <el-table-column prop="tags" label="tags" width="430">
        <template #default="scope">
          <el-tag v-for="argument in scope.row.tags">
            {{ argument }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="vhost permission" width="130">
        <template #default="scope">
          <el-button plain @click="showUserPermissionList(scope.row.name)">
            详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="topic permission" width="130">
        <template #default="scope">
          <el-button plain @click="handleUserPermissionList(scope.row.name)">
            详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="operations" width="100" fixed="right">
        <template #default="scope">
          <el-popconfirm
              width="230"
              hide-icon
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleUserDelete(scope.row)"
              :title="'是否删除User [ ' + scope.row.name + ' ] ？'">
            <template #reference>
              <el-button type="danger">
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog title="user manage" v-model="showUserPermissionForm" :close-on-click-modal="false" >
    <el-form :model="userPermissionForm" label-width="100px">
      <el-form-item label="Vhost">
        <el-select v-model="userPermissionForm.vhost">
          <el-option
              v-for="item in vhostList"
              :key="item.name"
              :label="item.name"
              :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="configure">
        <el-input v-model="userPermissionForm.configure"></el-input>
      </el-form-item>
      <el-form-item label="write">
        <el-input v-model="userPermissionForm.write"></el-input>
      </el-form-item>
      <el-form-item label="read">
        <el-input v-model="userPermissionForm.read"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleUserPermissionSave">Save</el-button>
      </el-form-item>
    </el-form>
    <el-table border :data="permissionList" style="width: 100%">
      <el-table-column prop="vhost" label="vhost" />
      <el-table-column prop="configure" label="configure" />
      <el-table-column prop="write" label="write" />
      <el-table-column prop="read" label="read" />
      <el-table-column label="operations" width="100" fixed="right">
        <template #default="scope">
          <el-popconfirm
              width="230"
              hide-icon
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleUserPermissionDelete(scope.row)"
              :title="'是否删除User [ ' + scope.row.user + ' ] 的权限？'">
            <template #reference>
              <el-button type="danger">
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

  <el-dialog title="user manage" v-model="showUserForm" :close-on-click-modal="false" label-width="160px">
    <el-form ref="form" :model="userForm" label-width="160px">
      <el-form-item label="username">
        <el-input v-model="userForm.username"></el-input>
      </el-form-item>
      <el-form-item label="password">
        <el-input v-model="userForm.password"></el-input>
      </el-form-item>
      <el-form-item label="Tags">
        <el-select v-model="userForm.tags">
          <el-option
              v-for="item in rabbitmqStore().role"
              :key="item.ukId"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleUserSave">Save</el-button>
        <el-button @click="showUserForm = false">Cancel</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>

</template>

<style scoped>

</style>